<template>
  <div>
    <div class="goodreturn-mokuai">
      <!-- 筛选查找 -->
      <div class="goodreturn-index">
        <div class="goodreturn-index-top">
          <div class="goodreturn-name">
            <div class="goodreturn-name-font">
              <i class="el-icon-search"></i>
              筛选查询
            </div>
            <div class="goodreturn-name-right">
              <el-button @click="onSubmit()">查询结果</el-button>
              <el-button @click="onSubmitTwo()">高级检索</el-button>
            </div>
            <div class="goodreturn-name-right" @click="packUp">
              <i class="el-icon-arrow-up"></i>
              收起筛选
            </div>
          </div>
          <div class="goodreturn-content">
            <!-- 筛选条件 -->
            <div class="goodreturn-button-select-2" v-if="showPrise">
              <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="用户账号:">
                  <el-input
                    v-model="formInline.userNumber"
                    placeholder="用户ID/账号"
                    class="select-width-1"
                  ></el-input>
                </el-form-item>
                <el-form-item label="用户昵称:">
                  <el-input v-model="formInline.userName" placeholder="用户昵称" class="select-width-1"></el-input>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </div>

      <!-- 数据模块 -->
      <div class="goodreturn-index">
        <div class="goodreturn-index-top">
          <div class="goodreturn-name">
            <div class="goodreturn-name-font">
              <i class="el-icon-s-unfold"></i>
              数据列表
            </div>
            <div class="userList-index-select">
              <div class="goodreturn-left goodreturn-index-select-button">
                <el-button @click="onCoupon" size="small">赠送优惠券</el-button>
              </div>
              <div class="goodreturn-left">
                <el-form :inline="true" :model="listLine" class="demo-form-inline" size="small">
                  <el-form-item label>
                    <el-select v-model="listLine.row" placeholder="导出数据" class="select-width-2">
                      <el-option label="选中用户" value="shanghai"></el-option>
                      <el-option label="全部用户" value="beijing"></el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item label>
                    <el-select
                      v-model="sort"
                      type="number"
                      placeholder="排序方式"
                      class="select-width-2"
                    >
                      <el-option label="会员等级" value="0"></el-option>
                      <el-option label="消费金额" value="1"></el-option>
                      <el-option label="有效订单数量" value="2"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
          <div class="goodreturn-content">
            <!-- 数据列表 -->
            <div>
              <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                border
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column label="用户ID" width="120" align="center">
                  <template slot-scope="scope">{{ scope.row.userId}}</template>
                </el-table-column>
                <el-table-column prop="userNumber" label="用户账号" width="140" align="center"></el-table-column>
                <el-table-column prop="userName" label="用户昵称" width="120" align="center"></el-table-column>
                <el-table-column prop="userMsId" label="会员等级" width="120" align="center"></el-table-column>
                <el-table-column prop="userConsume" label="消费金额" width="110" align="center"></el-table-column>
                <el-table-column prop="userOderNumber" label="订单数量" width="130" align="center"></el-table-column>
                <el-table-column prop="userIsActive" label="账户启用状态" width="130" align="center">
                  <template slot-scope="scope">
                    <el-switch
                      :active-value="0"
                      :inactive-value="1"
                      v-model="scope.row.userIsActive"
                    ></el-switch>
                  </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" align="center">
                  <template slot-scope="scope">
                    <el-button
                      @click="handleClick(scope.$index, scope.row)"
                      type="text"
                      size="small"
                    >查看</el-button>
                    <el-button
                      @click="handleClick(scope.$index, scope.row)"
                      type="text"
                      size="small"
                    >编辑</el-button>
                    <el-button
                      @click="handleClick(scope.$index, scope.row)"
                      type="text"
                      size="small"
                    >删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <!-- 页脚 -->
            <div class="goodreturn-paging">
              <!-- 批量操作 -->
              <div class="goodreturn-paging-leftlayout">
                <div class="opertation-block">
                  <!-- 全选需要设置方法目前只能操作0，1数据 -->
                  <el-button @click="toggleSelection()" size="small">全选</el-button>
                </div>
                <div class="opertation-block">
                  <el-form :inline="false" :model="operation" class="demo-form-inline" size="small">
                    <el-form-item label>
                      <el-select
                        v-model="operation.opertationType"
                        placeholder="批量操作"
                        class="select-width-2"
                      >
                        <el-option label="启用" value="0"></el-option>
                        <el-option label="停用" value="1"></el-option>
                        <el-option label="删除" value="2"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-form>
                </div>
                <div class="opertation-block">
                  <el-button size="small" @click="handleSelection">确定</el-button>
                </div>
              </div>
              <!-- 分页 -->
              <div class="goodreturn-paging-layout">
                <div class="block">
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage1"
                    :page-sizes="pageSizes"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                  ></el-pagination>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 高级检索 ss-->
    <div>
      <el-dialog title="高级检索" :visible.sync="dialogVisible" width="30%">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" label-position="top">
          <el-form-item label="用户账号:">
            <el-input v-model="formInline.userNumber" placeholder="用户ID/账号"></el-input>
          </el-form-item>
          <el-form-item label="用户昵称:">
            <el-input v-model="formInline.userName" placeholder="用户昵称"></el-input>
          </el-form-item>
          <el-form-item label="用户来源:">
            <el-select v-model="formInline.userSource" placeholder="全部">
              <el-option label="PC端" value="1"></el-option>
              <el-option label="WEB端" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="会员等级:">
            <el-select v-model="formInline.goodsCreateTime" placeholder="全部">
              <el-option label="普通会员" value="1"></el-option>
              <el-option label="黄金会员" value="2"></el-option>
              <el-option label="白金会员" value="3"></el-option>
              <el-option label="钻石会员" value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用户职业:">
            <el-select v-model="formInline.userJob" placeholder="全部">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button @click="resetForm(formInline)">重置</el-button>
            <el-button type="primary" @click="topSelect(formInline)">开始检索</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>

    <!-- 赠送优惠券 -->
    <div>
      <el-dialog title="赠送优惠券" :visible.sync="Visible" width="50%">
        <el-form :inline="true" :model="formInline2" class="demo-form-inline" label-position="top">
          <el-form-item label>
            <el-input
              placeholder="优惠券名称/优惠券编号"
              prefix-icon="el-icon-search"
              v-model="formInline2.goodsNumber"
            ></el-input>
          </el-form-item>

          <el-form-item label>
            <!-- 数据列表 -->
            <div>
              <el-table
                ref="multipleTable"
                :data="tableData2"
                tooltip-effect="dark"
                border
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" align="center"></el-table-column>
                <el-table-column label="优惠券名称" width="100" align="center">
                  <template slot-scope="scope">{{ scope.row.number }}</template>
                </el-table-column>
                <el-table-column prop="createtime" label="面额" width="90" align="center"></el-table-column>
                <el-table-column prop="username" label="剩余张数" width="80" align="center"></el-table-column>
                <el-table-column prop="returnprice" label="使用条件" width="80" align="center"></el-table-column>
                <el-table-column prop="linkman" label="有效期" width="120" align="center"></el-table-column>
              </el-table>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button @click="resetFormTwo('numberValidateForm')">重置</el-button>
            <el-button type="primary" @click="topSelectTwo()">开始检索</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>


<style>
/* 自定义 */

.goodreturn-left {
  float: left;
}

.select-width-1 {
  width: 200px;
}
.select-width-2 {
  width: 100px;
}
.goodreturn-mokuai {
  height: 1000px;
  background-color: rgb(249, 249, 249);
}
.goodreturn-index {
  width: 100%;
  margin: auto;
  background-color: rgb(255, 255, 255);
}
.goodreturn-index-top {
  margin-top: 30px;
}
.goodreturn-name {
  width: 100%;
  height: 50px;
  padding-top: 10px;
  background-color: rgb(240, 240, 240);
}
.goodreturn-name-font {
  height: 40px;
  line-height: 40px;
  float: left;
  margin-left: 20px;
  font-size: 14px;
}
.goodreturn-name-right {
  height: 40px;
  line-height: 40px;
  float: right;
  margin-right: 20px;
  font-size: 14px;
}
.userList-index-select {
  width: 450px;
  float: right;
  margin-right: 20px;
  font-size: 14px;
  padding-top: 5px;
}
.goodreturn-index-select-button {
  margin-right: 20px;
}
.goodreturn-content {
  width: 100%;
}
.goodreturn-button-select-2 {
  height: 50px;
  padding-top: 10px;
  padding-left: 20px;
}

.opertation-block {
  display: inline-block;
  margin-left: 3px;
}
.goodreturn-paging {
  height: 50px;
  width: 100%;
  background-color: rgb(253, 253, 254);
}
.goodreturn-paging-leftlayout {
  float: left;
  margin-top: 7px;
}
.goodreturn-paging-layout {
  float: right;
  margin-top: 7px;
}
</style>

<script>
import userApi from "@/api/user/list";
export default {
  data() {
    return {
      pageSize: 2,
      pageSizes: [2, 3, 4, 5, 10, 25, 50, 100],
      total: 5,
      currentPage1: 1,
      sort: 0,
      // 开启筛选模式
      selectrue: false,
      //   弹出框
      formInline: {
        userNumber: null,
        userName: null,
        userSource: null,
        userMsId: null,
        userJob: null,
        userCreateTime: null
      },
      //   弹出框2
      formInline2: {
        goodsNumber: "",
        goodsUser: "",
        goodsStatus: "",
        goodsCreateTime: "",
        goodsDisposeUser: "",
        goodsDisposeTime: ""
      },
      dialogVisible: false,
      Visible: false,
      // 隐藏
      showPrise: true,

      listLine: {
        row: ""
      },
      operation: {
        opertationType: ""
      },
      // 列表数据
      tableData: [],
      // 列表数据2
      tableData2: [
        {
          number: "黄金会员优惠券",
          createtime: "¥9599.00",
          username: "无限制",
          returnprice: "无限制",
          linkman: "2018-07-30 至 2026-12-31"
        }
      ],

      multipleSelection: [],
      // 批量操作临时数组
      userList: [],
      userOne: {
        userId: ""
      },
      // 分页
      currentPage4: 4
    };
  },

  // 监听有数据改变执行方法
  watch: {
    sort(val, newval) {
      console.log(val);
      console.log(newval);
      this.intData(this.currentPage1, this.pageSize, newval);
    }
    // 监控不起校
    //     "formInline.userNumber":{
    //       handler:function(newVal){
    // this.selectrue==true
    // console.log(newval);
    //       }
    //     }
  },
  methods: {
    //   赠送优惠券
    onCoupon() {
      console.log("赠送优惠券");
      this.Visible = true;
    },
    // 数据列表
    toggleSelection() {
      if (this.tableData) {
        this.tableData.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      // 因为此方法是在选择改变时调用，所以必须初始化数组 如果不初始化数组 数组将会层层叠加
      this.multipleSelection = [];
      // 为multipleSelection赋值   multipleSelection为id数组
      val.forEach(v => {
        this.multipleSelection[this.multipleSelection.length] = v.userId;
      });
    },

    //批量处理操作
    handleSelection() {
      console.log(this.multipleSelection);
      this.multipleSelection.forEach(v => {
        this.userOne.userId = v;
        this.userList[this.userList.length] = this.userOne;
      });
      console.log(this.userList);
      console.log(this.operation.opertationType);

      //  需要个连接后台方法

      userApi
        .setListByIdList(this.multipleSelection, this.operation.opertationType)
        .then(response => {
          console.log(response);

          this.$router.go(0);
        });
    },
    handleClick(index, row) {
      this.$router.push({
        path: "/user/userListCheck",
        query: { userId: row.userId }
      });
    },
    // 当每页显示条数改变后,被触发 , val是最新的每页显示条数
    handleSizeChange(val) {
      this.pageSize = val;
      console.log("搁到" + this.pageSize);
      if (this.selectrue == true) {
        this.intDataTwo(
          this.currentPage1,
          this.pageSize,
          this.formInline.userNumber,
          this.formInline.userName,
          this.formInline.userSource,
          this.formInline.userMsId,
          this.formInline.userJob,
          this.formInline.userCreateTime,
          this.sort
        );
      } else {
        this.intData(this.currentPage1, this.pageSize, this.sort);
      }
    },
    // 当页码改变后,被触发 , val 是最新的页面
    handleCurrentChange(val) {
      this.currentPage1 = val;
      if (this.selectrue == true) {
        this.intDataTwo(
          this.currentPage1,
          this.pageSize,
          this.formInline.userNumber,
          this.formInline.userName,
          this.formInline.userSource,
          this.formInline.userMsId,
          this.formInline.userJob,
          this.formInline.userCreateTime,
          this.sort
        );
      } else {
        this.intData(this.currentPage1, this.pageSize, this.sort);
      }
    },
    onSubmit() {
      console.log(this.formInline);

      var userNumber = this.formInline.userNumber;
      var userName = this.formInline.userName;
      var userSource = this.formInline.userSource;
      var userMsId = this.formInline.userMsId;
      var userJob = this.formInline.userJob;
      var userCreateTime = this.formInline.userCreateTime;

      if (
        userNumber != null ||
        userName != null ||
        userSource != null ||
        userMsId != null ||
        userJob != null ||
        userCreateTime != null
      ) {
        this.selectrue = true;
      } else {
        this.selectrue = false;
      }
      console.log("筛选模式:" + this.selectrue);
      this.intDataTwo(
        this.currentPage1,
        this.pageSize,
        userNumber,
        userName,
        userSource,
        userMsId,
        userJob,
        userCreateTime,
        this.sort
      );
    },
    // 弹出框
    onSubmitTwo() {
      console.log("弹出框!");
      this.dialogVisible = true;
    },
    topSelect(formInline) {
      console.log(this.formInline);

      var userNumber = this.formInline.userNumber;
      var userName = this.formInline.userName;
      var userSource = this.formInline.userSource;
      var userMsId = this.formInline.userMsId;
      var userJob = this.formInline.userJob;
      var userCreateTime = this.formInline.userCreateTime;

      if (
        userNumber != null ||
        userName != null ||
        userSource != null ||
        userMsId != null ||
        userJob != null ||
        userCreateTime != null
      ) {
        this.selectrue = true;
      } else {
        this.selectrue = false;
      }
      console.log("筛选模式:" + this.selectrue);
      this.intDataTwo(
        this.currentPage1,
        this.pageSize,
        userNumber,
        userName,
        userSource,
        userMsId,
        userJob,
        userCreateTime,
        this.sort
      );
    },
    resetForm(formName) {
      console.log("sss");
      console.log(formName);
      this.formInline = null;
      console.log(this.formInline);
      //  this.$refs[formName].resetFields();
    },
    // 点击显示和隐藏
    packUp: function() {
      this.showPrise = !this.showPrise;
    },

    // 获取分页数据
    intData(pageNum, pageSize, sort) {
      userApi.getListByOder(pageNum, pageSize, sort).then(response => {
        console.log(response);
        this.tableData = response.data.data.list;
        this.total = response.data.data.total;
      });
    },
    intDataTwo(
      pageNum,
      pageSize,
      userNumber,
      userName,
      userSource,
      userMsId,
      userJob,
      userCreateTime,
      sort
    ) {
      userApi
        .getListByUser(
          pageNum,
          pageSize,
          userNumber,
          userName,
          userSource,
          userMsId,
          userJob,
          userCreateTime,
          sort
        )
        .then(response => {
          console.log(response);

          this.tableData = response.data.data.list;
          this.total = response.data.data.total;
        });
    }
  },
  mounted() {
    this.intData(this.currentPage1, this.pageSize, this.sort);
  }
};
</script>